<%--
  Created by IntelliJ IDEA.
  User: cyliu
  Date: 2023/12/20
  Time: 10:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .content {
            width: 300px;
            margin: 0 auto;
        }

        .content h1 {
            width: 200px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
        }

        input {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <h1>用户注册</h1>
        <form action="${pageContext.request.contextPath}/user/do_reg" method="post">
            <ul>
                <li><input type="text" name="name" placeholder="请输入您的姓名" required></li>
                <li>&nbsp;</li>
                <li><input id="username" type="text" name="username" placeholder="请输入您的用户名" required></li>
                <li id="username_msg">&nbsp;</li>
                <li><input id="p" type="password" name="password" placeholder="请输入您的密码" required></li>
                <li>&nbsp;</li>
                <li><input id="rp" type="password" placeholder="再次输入" required></li>
                <li id="rp_msg">&nbsp;</li>
                <li><input id="mn" type="text" name="mobileNo" placeholder="请输入您的手机号码" required></li>
                <li id="mn_msg">&nbsp;</li>
                <li><input type="text" name="address" placeholder="请输入您的地址" required></li>
                <li>&nbsp;</li>
                <li><input type="number" name="money" placeholder="充值金额" required></li>
                <li>&nbsp;</li>
                <li><input type="submit" id="sub"  ></li>
            </ul>
        </form>
    </div>

</div>
<script src="${pageContext.request.contextPath}/js/jquery3.6.1.js"></script>
<script>
    let baseUrl = "${pageContext.request.contextPath}"
    $("#username").blur(()=>{
        let user = {"username":$("#username").val()}
        userJson = JSON.stringify(user);

        console.log(userJson);
        $.ajax({
            contentType:"application/json",
            url:baseUrl+"/user/check_user",
            dataType:"json",
            type:"post",
            data:userJson,
            success:function (res){
                console.log(res)
                if (res.code == 2000){
                    $("#username_msg").html("该用户已注册");
                    //关闭提交按钮
                    $("#sub").prop("disabled",true);
                }else {
                    $("#sub").prop("disabled",false);
                }
            },
            error:function (err){
                console.log(err)
            }
        })
    })

    $("#mn").blur(()=>{
        let user = {"mobileNo":$("#mn").val()}
        userJson = JSON.stringify(user);

        // $.post(baseUrl+"/user/check_user",{},function (res){
        //     console.log(res);
        // })
        $.ajax({
            contentType:"application/json",
            url:baseUrl+"/user/check_user",
            dataType:"json",
            type:"post",
            data:userJson,
            success:function (res){
                console.log(res)
                if (res.code == 2000){
                    $("#mn_msg").html("该手机号已注册");
                    //关闭提交按钮
                    $("#sub").prop("disabled",true);
                }else {
                    $("#sub").prop("disabled",false);
                }
            },
            error:function (err){
                console.log(err)
            }
        })
    })

    $("#rp").blur(()=>{
        console.log($("#p").val());
        console.log($("#rp").val());
        if ($("#p").val() != $("#rp").val()){
            $("#sub").prop("disabled",true);
            $("#rp_msg").html("两次密码不一致")
        }else {
            $("#sub").prop("disabled",false);
            $("#rp_msg").html("两次密码一致了")
        }

    })
</script>
</body>
</html>
